<template>
  <!-- template（模版） 这里 是写结构的 html 里面该写啥就写啥 -->
  <div class="App">
    <div class="box" @click="fn"></div>
  </div>
</template>


<script>
// 这里是写 逻辑的

// 导出的是当前组件的配置项
// 里面可以提供 data(特殊) methods computed watch 生命周期八大钩子
export default {
  created() {
    console.log('我是created');
  },
  methods:{
    fn() {
      alert('你好')
    }
  }
}
</script>

<style lang="less">
/* 这里是写 样式的 */
/* 让style 支持 less
   1. 给style 加上 lang="less"
   2. 安装依赖包 less less-loader
*/
.App {
  width: 500px;
  height: 500px;
  background: pink;
  .box {
  width: 100px;
  height: 100px;
  background: skyblue;
 }
}

</style>